<template>
    <i v-if="isStop" :class="className" :style="style" @click.stop="click" />
    <i v-else :class="className" :style="style" @click="click" />
</template>

<script>
import '@styles/base/newicon.less';
import { DEFAULT_MODE, DEFAULT_THEME, DEFAULT_STYLE_MODE } from '@constants/style';
import { getUiMode, getUiStyleMode, getUiTheme } from '@biztools/info';
export default {
    name: 'MiniIcon', // 新版图标
    props: {
        name: String,
        size: [Number, String],
        isStop: Boolean,
        mode: {
            type: String,
            default: getUiMode() || DEFAULT_MODE, // 模式，取值：浅色版（white）、深色版（black）
        },
        theme: {
            type: String,
            default: getUiTheme() || DEFAULT_THEME, // 主题，取值颜色
        },
        styleMode: {
            type: String,
            default: getUiStyleMode() || DEFAULT_STYLE_MODE, // 风格，取值：circle-圆角风格 square-直角风格，默认：circle
        }
    },
    computed: {
        className() {
            const { name, styleMode, mode } = this.$props;
            return `mini-icon mini-icon-${name}-${styleMode} ${mode}`;
        },
        style() {
            const { size, theme, gradient } = this.$props;
            let result = {};
            if (size) {
                result['font-size'] = size + 'px';
            }
            if (theme) {
                result['color'] = theme;
            }
            return result;
        },
    },
    methods: {
        click() {
            this.$emit('click');
        },
    },
};
</script>

<style lang="less">

</style>
